<template>
  <div class="tree">
    <button class="chick" @click="chick">请选择地区</button>
    <div class="area">
      您选择的地区是：
      <div v-for="(item, index) of choice" :key="index + 3">{{ item }}</div>
    </div>
    <div class="box" v-show="ischick">
      <ul class="select">
        <li
          v-for="(item, index) of options"
          :key="index"
          @mouseover="mouseOver(index)"
        >
          {{ item.text }}
        </li>
      </ul>
      <ul class="options">
        <li v-for="(itemcity, index) of city" :key="index + 1">
          <ol
            class="selected"
            v-for="(m, k) of itemcity"
            :key="k + 2"
            @click="checkfrom(k)"
          >
            {{
              m.text
            }}
          </ol>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ischick: false,
      city: [],
      options: [
        {
          text: "浙江",
          value: "010",
          children: [
            { text: "杭州", value: "011" },
            { text: "宁波", value: "012" },
            { text: "温州", value: "013" },
            { text: "嘉兴", value: "014" },
          ],
        },
        {
          text: "江苏",
          value: "020",
          children: [
            { text: "南京", value: "021" },
            { text: "无锡", value: "022" },
            { text: "徐州", value: "023" },
            { text: "苏州", value: "024" },
          ],
        },
        {
          text: "福建",
          value: "030",
          children: [
            { text: "福州", value: "031" },
            { text: "厦门", value: "032" },
            { text: "莆田", value: "033" },
            { text: "三明", value: "034" },
          ],
        },
        {
          text: "山西",
          value: "040",
          children: [
            { text: "太原", value: "041" },
            { text: "晋中", value: "042" },
            { text: "大同", value: "043" },
            { text: "吕梁", value: "044" },
          ],
        },
      ],
      choice: [],
    };
  },
  methods: {
    // 点击选择地区
    chick() {
      if (this.ischick == false) {
        this.ischick = true;
      } else {
        this.ischick = false;
      }
    },
    // 鼠标移入显示可选城市
    mouseOver(index) {
      this.city = this.options[index];
    },
    // 保存选择的地区
    checkfrom(k) {
      if (this.choice.length == 0) {
        console.log("第一次添加");
        this.choice.push(this.city.children[k].text);
      } else {
        let num = this.choice.indexOf(this.city.children[k].text);
        console.log("数组不为空");
        if (num == -1) {
          console.log("没找到重复的");
          this.choice.push(this.city.children[k].text);
        } else {
          this.choice.forEach((element) => {
            if (element == this.city.children[k].text) {
              console.log(element, this.city.children[k].text, "判断重复");
              this.choice.splice(num, 1);
              console.log(this.choice, "当前已选");
            }
          });
        }
      }
    },
  },
};
</script>

<style>
.tree ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.tree .box {
  margin: 0 auto;
  width: 500px;
  height: 500px;
  padding: 20px;
  display: flex;
  justify-content: flex-start;
  background-color: #ececec;
}
.tree .select {
  width: 30%;
  font-size: 20px;
  text-align: left;
  display: flex;
  flex-flow: column wrap;
  background-color: #f5f5f5;
}
.tree .select > li {
  height: 50px;
  width: 100%;
  background-color: #f5f5f5;
  line-height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.tree .select > li:hover {
  background-color: #fff;
  cursor: pointer;
  font-weight: 600;
}
.tree .select > li::before {
  content: "";
  height: 18px;
  width: 5px;
  margin-right: 10px;
}
.tree .select > li:hover::before {
  content: "";
  height: 18px;
  width: 5px;
  margin-right: 10px;
  background-color: red;
}
.tree .options {
  width: 50%;
  padding: 10px 0;
  text-align: left;
  background-color: #fff;
}
.tree .options ol {
  line-height: 40px;
  cursor: pointer;
}
.tree .selected {
  color: #000;
}
.tree .selected:active{
  color: red;
  font-weight: 600;
}
.tree .selected:active::after{
  content: "√";
  margin-left: 50%;
}
.tree .area {
  width: 500px;
  text-align: center;
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto;
  margin-bottom: 20px;
}
.tree .area > div {
  margin-right: 20px;
}
</style>
